<template>
  <div class="area">
    <div class="list">
      <div>
        <h2 class="choseh">分类选择</h2>
        <el-cascader
          placeholder="推荐歌手"
          class="chosee"
          :options="options"
          :show-all-levels="true"
          @change="choseList"
        ></el-cascader>
      </div>

      <el-divider class="hrArea"><i class="el-icon-headset"></i></el-divider>
      <!-- 初始化歌单列表 -->
      <div v-if="!showSearchList">
        <el-row class="bodyStyle">
          <el-col
            :span="24"
            class="cardStyle"
            v-for="item in contentList"
            :key="item.id"
            @click.native="goToSearchLists(item)"
          >
            <el-card
              class="imageStyle"
              shadow="hover"
              :body-style="{ padding: '0px' }"
            >
              <!-- 展示图片和姓名 -->
              <img class="imgOne" :src="item.picUrl" />
              <div class="textStyle">{{ item.name }}</div>
              <!-- 鼠标悬浮样式 -->
              <div class="top">
                <img class="imgTwo" src="../assets/play.png" />
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!-- 搜索结果歌单列表 -->
      <div v-if="showSearchList">
        <el-row class="bodyStyle">
          <el-col
            :span="24"
            class="cardStyle"
            v-for="item in searchList"
            :key="item.id"
            @click.native="goToSearchLists(item)"
          >
            <el-card
              class="imageStyle"
              shadow="hover"
              :body-style="{ padding: '0px' }"
            >
              <!-- 展示图片和姓名 -->
              <img class="imgOne" :src="item.picUrl" />
              <div class="textStyle">{{ item.name }}</div>
              <!-- 鼠标悬浮样式 -->
              <div class="top">
                <img class="imgTwo" src="../assets/play.png" />
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Singer",
  data() {
    return {
      showSearchList: false,
      contentList: [],
      searchList: [],
      options: [
        {
          value: -1,
          label: "全部",
        },
        {
          value: 7,
          label: "华语",
          children: [
            {
              value: 1,
              label: "男歌手",
            },
            {
              value: 2,
              label: "女歌手",
            },
            {
              value: 3,
              label: "组合/乐队",
            },
          ],
        },
        {
          value: 96,
          label: "欧美",
          children: [
            {
              value: 1,
              label: "男歌手",
            },
            {
              value: 2,
              label: "女歌手",
            },
            {
              value: 3,
              label: "组合/乐队",
            },
          ],
        },
        {
          value: 8,
          label: "日本",
          children: [
            {
              value: 1,
              label: "男歌手",
            },
            {
              value: 2,
              label: "女歌手",
            },
            {
              value: 3,
              label: "组合/乐队",
            },
          ],
        },
        {
          value: 16,
          label: "韩国",
          children: [
            {
              value: 1,
              label: "男歌手",
            },
            {
              value: 2,
              label: "女歌手",
            },
            {
              value: 3,
              label: "组合/乐队",
            },
          ],
        },
        {
          value: 0,
          label: "其他",
          children: [
            {
              value: 1,
              label: "男歌手",
            },
            {
              value: 2,
              label: "女歌手",
            },
            {
              value: 3,
              label: "组合/乐队",
            },
          ],
        },
      ],
    };
  },
  created() {
    this.getHotList();
  },
  methods: {
    //推荐歌单
    getHotList() {
      axios
        .get("http://localhost:3000/artist/list", {
          params: {
            type:-1,
            limit: 50,
          },
        })
        .then((response) => {
          this.contentList = response.data.artists;
        })
        .catch((error) => {
          console.warn(error);
        });
    },
    //搜索分类歌单
    choseList(val) {
      axios
        .get("http://localhost:3000/artist/list", {
          params: {
            type: val[1],
            area: val[0],
            limit: 100,
          },
        })
        .then((response) => {
          console.log("response", response);
          this.searchList = response.data.artists;
        })
        .catch((error) => {
          console.warn(error);
        });
      this.showSearchList = true;
    },
    //转向详情歌单页面
    goToSearchLists(item) {
      this.$router
        .push({
          name: "alllsingers",
          query: {
            list: item,
          },
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
  },
};
</script>

<style scoped>
.area {
  margin-top: 20px;
  margin-bottom: 20px;
  background: #fff;
}
.list {
  width: 985px;
  border: 3px solid rgba(243, 243, 243, 1);
  margin: auto;
}
.choseh {
  float: left;
  margin-left: 20px;
}
.chosee {
  float: left;
  margin-left: 10px;
  margin-top: 15px;
}
.hrArea {
  height: 2px;
  width: 940px;
  margin-top: 65px;
  margin-left: 21px;
  border: 1px solid #1d953f;
  background: #1d953f;
}

.bodyStyle {
  width: 920px;
  height: 780px;
  margin-top: 20px;
  margin-bottom: 40px;
  margin-left: 35px;
  box-shadow: 4px 4px 5px 3px #999;
  overflow: scroll;
}
.cardStyle {
  width: 140px;
  margin: 20px;
  box-shadow: 2px 2px 3px 3px #999;
}
.imageStyle {
  height: 140px;
  width: 100%;
}
.textStyle {
  font-size: 6px;
  line-height: 20px;
  text-align: center;
  overflow: hidden;
}
.imgOne {
  height: 120px;
  width: 100%;
  display: block;
}
.imgTwo {
  height: 90px;
  width: 90px;
  margin-top: 245px;
  margin-left: 25px;
}
/* 写好遮罩层样式,并且让它先不显示 */
.top {
  width: 250px;
  height: 400px;
  background-color: black;
  margin-top: -360px;
  opacity: 0;
}
/* 鼠标hover,显示遮罩,设置过渡时间 */
.top:hover {
  opacity: 0.4;
  transition: opacity 0.5s;
}
</style>